<script lang="ts" setup>
import { ref } from 'vue'
import LoginCard from './components/LoginCard/index.vue'
import RegisterCard from './components/RegisterCard/index.vue'

const isLogin = ref<boolean>(true)

const enterAnimation = 'card-enter-active'
</script>

<template>
  <div text="dark-600 dark:gray-200" flex="~ col" class="min-h-[100vh] items-center justify-center">
    <main>
      <Transition name="card">
        <Component
          :is="isLogin ? LoginCard : RegisterCard"
          :class="enterAnimation"
          border="rounded-md"
          m="y-8"
          p="8"
          @toggle="isLogin = !isLogin"
        />
      </Transition>
    </main>
  </div>
</template>

<style lang="scss" scoped>
.card-enter-active {
  position: relative;
  transform-origin: right -200%;
  animation: card-in 1s;
  @keyframes card-in {
    0% {
      opacity: 0;
      transform: scale(0.9) rotate(45deg);
    }
    100% {
      opacity: 1;
      transform: scale(1) rotate(0deg);
    }
  }
}

.card-leave-active {
  animation: card-out 1s;
  transform-origin: center 300%;
  position: absolute;
  @keyframes card-out {
    0% {
      opacity: 1;
      transform: scale(1) rotate(0);
    }
    100% {
      opacity: 0;
      transform: scale(0.9) rotate(45deg);
    }
  }
}

:deep(.arco-input-focus) {
  border-color: transparent;
}
</style>
